<template>
  <div class="page-filter" :class="className">
    <div
      v-for="(item, index) in showFilterList"
      v-show="index < hideNum"
      :key="item.value || index"
      class="filter-item && filter-item-width"
    >
      <!-- <label class="filter-label" v-if="item.type !== 'button'">{{item.key}}</label> -->
      <!-- solt -->
      <template v-if="item.slot">
        <slot :name="'filter-' + item.value" />
      </template>
      <!-- 输入框 -->
      <template v-else>
        <el-input
          v-if="item.componentType === 'input'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled="item.disabled ? item.disabled : false"
          :clearable="item.clearable === false ? item.clearable : true"
          :placeholder="getPlaceholder(item)"
          @keyup.enter.native="item.event"
          @input="(e) => (searchQuery[item.value] = validSe(e))"
        />
        <el-input
          v-if="item.componentType === 'textarea'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled="item.disabled ? item.disabled : false"
          :clearable="item.clearable === false ? item.clearable : true"
          :placeholder="getPlaceholder(item)"
          @keyup.enter="item.event"
          @input="(e) => (searchQuery[item.value] = validSe(e))"
        />
        <!-- 搜索框 -->
        <el-input
          v-if="item.componentType === 'search'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled="item.disabled ? item.disabled : false"
          :placeholder="getPlaceholder(item)"
          @keyup.enter="item.event"
          @input="(e) => (searchQuery[item.value] = validSe(e))"
        >
          <el-button
            slot="append"
            :icon="Search"
            @click="item.event"
          ></el-button>
        </el-input>
        <!-- 选择框 -->
        <el-select
          v-if="item.componentType === 'select'"
          v-model="searchQuery[item.asValue ? item.asValue : item.value]"
          :class="`filter-${item.componentType}`"
          :disabled="item.disabled"
          :multiple="item.multiple"
          :clearable="item.clearable === false ? item.clearable : true"
          :filterable="item.filterable === false ? item.filterable : true"
          @visible-change="visibleChange($event, item.list)"
          :placeholder="getPlaceholder(item)"
          :filterMethod="filterMethod"
          @change="item.event"
        >
          <el-option
            v-for="(childItem, childIndex) in listTypeOptionsInfo[item.list]"
            :key="childItem.key"
            :label="
              childItem.key.length > 20
                ? childItem.key.substring(0, 20) + '...'
                : childItem.key
            "
            :value="childItem.value"
          />
        </el-select>
        <SelectMultiple
          v-if="item.componentType === 'selectMultiple'"
          v-model="searchQuery[item.asValue ? item.asValue : item.value]"
          :class="`filter-${item.componentType}`"
          :placeholder="getPlaceholder(item)"
          :options="listTypeOptionsInfo[item.list]"
          :key-field="item.keyField"
          :value-field="item.valueField"
          :clearable="item.clearable === false ? item.clearable : true"
          :filterable="item.filterable === false ? item.filterable : true"
          :disabled="item.disabled"
          :multiple="true"
          :clear-type="clearType"
          @change="item.event"
        />
        <!-- 自定义下拉框 -->
        <slip-select
          v-if="item.componentType === 'slip-select'"
          v-model:modelValue="
            searchQuery[item.asValue ? item.asValue : item.value]
          "
          :class="`filter-${item.componentType}`"
          value-key="value"
          :placeholder="getPlaceholder(item)"
          :api="item.api"
          :query="item.query"
          :default-value="item.defaultValue"
          :key-field="item.keyField"
          :value-field="item.valueField"
          :clearable="item.clearable === false ? item.clearable : true"
          :filterable="item.filterable === false ? item.filterable : true"
          :disabled="item.disabled"
          :multiple="item.multiple"
          :clear-type="clearType"
          :slip-select-request="slipSelectRequest"
          @changeValue="item.event"
        />

        <!--字典选择框-->
        <select-model
          v-if="item.componentType === 'select-model'"
          v-model:modelValue="
            searchQuery[item.asValue ? item.asValue : item.value]
          "
          :class="`filter-${item.componentType}`"
          :type-code="item.code"
          :disabled="item.disabled"
          :clearable="item.clearable === false ? item.clearable : true"
          :check-default="item.checkDefault ? item.checkDefault : false"
          :placeholder="getPlaceholder(item)"
          :only-show-option="item.onlyShowOption"
          :multiple="item.multiple"
          :clear-type="clearType"
          @change="item.event"
        />
        <!-- 时间选择框 -->
        <el-time-select
          v-if="item.componentType === 'time'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled-date="
            item.TimePickerOptions && item.TimePickerOptions.disabledDate
          "
          :clearable="item.clearable === false ? item.clearable : true"
          :disabled="item.disabled"
          :placeholder="getPlaceholder(item)"
        />
        <!-- 日期选择框 -->
        <el-date-picker
          v-if="item.componentType === 'date'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled-date="
            item.datePickerOptions && item.datePickerOptions.disabledDate
          "
          type="date"
          :clearable="item.clearable === false ? item.clearable : true"
          :disabled="item.disabled"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :placeholder="getPlaceholder(item)"
          @change="item.event"
        />
        <el-date-picker
          v-if="item.componentType === 'daterange'"
          v-model="timeInfo[item.value]"
          :class="`filter-${item.componentType}`"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          :shortcuts="$fn.pickerOptionsFn()"
          align="right"
          :start-placeholder="item.label + '开始日期'"
          :end-placeholder="item.label + '结束日期'"
          @change="timeChange($event, item.value)"
        ></el-date-picker>
        <el-date-picker
          v-if="item.componentType === 'dateTime'"
          v-model="searchQuery[item.value]"
          :class="`filter-${item.componentType}`"
          :disabled-date="
            item.datePickerOptions && item.datePickerOptions.disabledDate
          "
          type="datetime"
          :clearable="item.clearable === false ? item.clearable : true"
          :disabled="item.disabled"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :placeholder="getPlaceholder(item)"
          @change="item.event"
        />
        <el-date-picker
          v-if="item.componentType === 'datetimerange'"
          v-model="timeInfo[item.value]"
          :class="`filter-${item.componentType}`"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          :shortcuts="$fn.pickerOptionsFn()"
          align="right"
          :default-time="[
            new Date(2000, 1, 1, 0, 0, 0),
            new Date(2000, 1, 1, 23, 59, 59),
          ]"
          :start-placeholder="item.label + '开始日期'"
          :end-placeholder="item.label + '结束日期'"
          @change="timeChange($event, item.value)"
        ></el-date-picker>
        <el-input
          v-if="item.componentType === 'select-user'"
          v-model="userInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkUser(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-supplier'"
          v-model="supplierInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkSupplier(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-product'"
          v-model="productInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkProduct(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-use-status'"
          v-model="selectUseStatusInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkUserStatus(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-dept'"
          v-model="selectDeptInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkDept(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-device-type'"
          v-model="selectDeviceTypeInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkDevice(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-finance-type'"
          v-model="selectFinanceTypeInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkFinance(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-asset-classify-type'"
          v-model="selectAssetClassifyTypeInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkClassify(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-fiscal-period'"
          v-model="selectFiscalPeriodInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template
            #suffix
            v-if="selectFiscalPeriodInfo.data[item.value]"
            style="cursor: pointer"
          >
            <el-icon @click="clearFiscalPeriod()"
              ><CircleCloseFilled
            /></el-icon>
          </template>
          <template #append>
            <el-icon @click="checkFiscalPeriod(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-patrol-route'"
          v-model="selectPatrolRouteInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkPatrolRoute(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-maintenance'"
          v-model="selectMaintenanceInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkMaintenance(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-repair-user'"
          v-model="selectRepairUserInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkRepairUser(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-maintenance-user'"
          v-model="selectMaintenanceUserInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkMaintenanceUser(item)"
              ><MoreFilled
            /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-shelf-no'"
          v-model="selectCargoSpaceInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkShelfNo(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <el-input
          v-if="item.componentType === 'select-product-class'"
          v-model="productClassificationInfo.data[item.value]"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择' + item.label"
        >
          <template #append>
            <el-icon @click="checkProductClass(item)"><MoreFilled /></el-icon>
          </template>
        </el-input>
        <tree-select
          v-if="item.componentType === 'treeSelect'"
          v-model:value="searchQuery[item.asValue ? item.asValue : item.value]"
          :class="`filter-${item.componentType}`"
          :disabled="item.disabled"
          :clearable="item.clearable === false ? item.clearable : true"
          :filterable="item.filterable === false ? item.filterable : true"
          :checkStrictly="
            item.checkStrictly === false ? item.checkStrictly : true
          "
          :placeholder="getPlaceholder(item)"
          :options="item.selectData"
          :objMap="item.objMap"
        />
      </template>
    </div>
    <div
      v-for="(item, index) in getConfigList('btn')"
      :key="index"
      class="filter-item"
    >
      <template v-if="item.type === 'slot'">
        <slot :name="'filter-' + item.value" />
      </template>
      <!-- 按钮 -->
      <el-button
        v-else-if="item.type === 'button'"
        :class="`filter-${item.type}`"
        :type="item.btType"
        :icon="item.icon"
        :disabled="setBtnDisabled(item.disabled)"
        @click="item.event"
        >{{ item.label }}</el-button
      >
    </div>
    <!-- <el-icon
      v-if="getConfigList('search').length > 2"
      class="slip-edit"
      :class="hideNum === 2 ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
      @click="moreFilterList"
    > -->
    <el-icon
      v-if="showFilterList.length > 2"
      class="slip-edit"
      @click="moreFilterList"
      ><ArrowDown v-if="hideNum === 2" /><ArrowUp v-else
    /></el-icon>
    <!-- </el-icon> -->
    <select-users
      v-if="userInfo.visible"
      v-model:show-dialog="userInfo.visible"
      :api="userInfo.api"
      :save-empty="true"
      :checked-list="
        userInfo.row.checkBox ? userInfo.checked[userInfo.row.value] : []
      "
      :check-box="userInfo.row.checkBox"
      :highlight-row="userInfo.row.highlightRow"
      @callback="callBackUser"
    />
    <select-use-status
      v-if="selectUseStatusInfo.visible"
      v-model:show-dialog="selectUseStatusInfo.visible"
      :api="selectUseStatusInfo.api"
      :save-empty="true"
      :checked-list="
        selectUseStatusInfo.row.checkBox
          ? selectUseStatusInfo.checked[selectUseStatusInfo.row.value]
          : []
      "
      :check-box="selectUseStatusInfo.row.checkBox"
      :highlight-row="selectUseStatusInfo.row.highlightRow"
      @callback="callBackUserStatus"
    ></select-use-status>
    <select-dept
      v-if="selectDeptInfo.visible"
      v-model:show-dialog="selectDeptInfo.visible"
      :api="selectDeptInfo.api"
      :save-empty="true"
      :checked-list="
        selectDeptInfo.row.checkBox
          ? selectDeptInfo.checked[selectDeptInfo.row.value]
          : []
      "
      :check-box="selectDeptInfo.row.checkBox"
      :highlight-row="selectDeptInfo.row.highlightRow"
      :query="selectDeptInfo.row.query"
      @callback="callBackDept"
    ></select-dept>
    <SelectSettingClassification
      v-if="selectDeviceTypeInfo.visible"
      v-model:show-dialog="selectDeviceTypeInfo.visible"
      :api="selectDeviceTypeInfo.api"
      :save-empty="true"
      :checked-list="
        selectDeviceTypeInfo.row.checkBox
          ? selectDeviceTypeInfo.checked[selectDeviceTypeInfo.row.value]
          : []
      "
      :check-box="selectDeviceTypeInfo.row.checkBox"
      :highlight-row="selectDeviceTypeInfo.row.highlightRow"
      @callback="callBackselectDeviceType"
    />
    <SelectSettingCategory
      v-if="selectFinanceTypeInfo.visible"
      v-model:show-dialog="selectFinanceTypeInfo.visible"
      :api="selectFinanceTypeInfo.api"
      :save-empty="true"
      :checked-list="
        selectFinanceTypeInfo.row.checkBox
          ? selectFinanceTypeInfo.checked[selectFinanceTypeInfo.row.value]
          : []
      "
      :check-box="selectFinanceTypeInfo.row.checkBox"
      :highlight-row="selectFinanceTypeInfo.row.highlightRow"
      @callback="callBackselectFinanceType"
    />
    <SelectAssetClassify
      v-if="selectAssetClassifyTypeInfo.visible"
      v-model:show-dialog="selectAssetClassifyTypeInfo.visible"
      :api="selectAssetClassifyTypeInfo.api"
      :save-empty="true"
      :checked-list="
        selectAssetClassifyTypeInfo.row.checkBox
          ? selectAssetClassifyTypeInfo.checked[
              selectAssetClassifyTypeInfo.row.value
            ]
          : []
      "
      :check-box="selectAssetClassifyTypeInfo.row.checkBox"
      :highlight-row="selectAssetClassifyTypeInfo.row.highlightRow"
      @callback="callBackSelectClassifyType"
    />
    <SelectFiscalPeriod
      v-if="selectFiscalPeriodInfo.visible"
      v-model:show-dialog="selectFiscalPeriodInfo.visible"
      :api="selectFiscalPeriodInfo.api"
      :save-empty="true"
      :checked-list="
        selectFiscalPeriodInfo.row.checkBox
          ? selectFiscalPeriodInfo.checked[selectFiscalPeriodInfo.row.value]
          : []
      "
      :check-box="selectFiscalPeriodInfo.row.checkBox"
      :highlight-row="selectFiscalPeriodInfo.row.highlightRow"
      :query="selectFiscalPeriodInfo.row.query"
      @callback="callBackSelectFiscalPeriod"
    />
    <selectPatrolRoute
      v-if="selectPatrolRouteInfo.visible"
      v-model:show-dialog="selectPatrolRouteInfo.visible"
      :save-empty="true"
      :checked-list="
        selectPatrolRouteInfo.row.checkBox
          ? selectPatrolRouteInfo.checked[selectPatrolRouteInfo.row.value]
          : []
      "
      :check-box="selectPatrolRouteInfo.row.checkBox"
      :highlight-row="selectPatrolRouteInfo.row.highlightRow"
      @callback="callBackPatrolRouteInfo"
    />
    <selectMaintenance
      v-if="selectMaintenanceInfo.visible"
      v-model:show-dialog="selectMaintenanceInfo.visible"
      :save-empty="true"
      :checked-list="
        selectMaintenanceInfo.row.checkBox
          ? selectMaintenanceInfo.checked[selectMaintenanceInfo.row.value]
          : []
      "
      :check-box="selectMaintenanceInfo.row.checkBox"
      :highlight-row="selectMaintenanceInfo.row.highlightRow"
      @callback="callBackMaintenance"
    />
    <!-- 维修人员 -->
    <SelectRepairUser
      v-if="selectRepairUserInfo.visible"
      v-model:showDialog="selectRepairUserInfo.visible"
      :checked-list="
        selectRepairUserInfo.row.checkBox
          ? selectRepairUserInfo.checked[selectRepairUserInfo.row.value]
          : []
      "
      :check-box="selectRepairUserInfo.row.checkBox"
      :highlight-row="selectRepairUserInfo.row.highlightRow"
      :saveEmpty="true"
      @callback="selectRepairUserCallBack"
    />
    <SelectMaintenanceUser
      :title="selectMaintenanceUserInfo.title"
      v-if="selectMaintenanceUserInfo.visible"
      v-model:showDialog="selectMaintenanceUserInfo.visible"
      :checked-list="
        selectMaintenanceUserInfo.row.checkBox
          ? selectMaintenanceUserInfo.checked[
              selectMaintenanceUserInfo.row.value
            ]
          : []
      "
      :showAsset="true"
      :check-box="selectMaintenanceUserInfo.row.checkBox"
      :highlight-row="selectMaintenanceUserInfo.row.highlightRow"
      :saveEmpty="true"
      @callback="selectMaintenanceUserCallBack"
    />
    <SelectCargoSpace
      v-if="selectCargoSpaceInfo.visible"
      v-model:showDialog="selectCargoSpaceInfo.visible"
      :checked-list="
        selectRepairUserInfo.row.checkBox
          ? selectCargoSpaceInfo.checked[selectCargoSpaceInfo.row.value]
          : []
      "
      :check-box="selectCargoSpaceInfo.row.checkBox"
      :highlight-row="selectCargoSpaceInfo.row.highlightRow"
      :saveEmpty="true"
      @callback="selectCargoSpaceCallBack"
    />
    <select-supplier
      v-if="supplierInfo.visible"
      v-model:show-dialog="supplierInfo.visible"
      :api="supplierInfo.api"
      :save-empty="true"
      :checked-list="
        supplierInfo.row.checkBox
          ? supplierInfo.checked[supplierInfo.row.value]
          : []
      "
      :check-box="supplierInfo.row.checkBox"
      :highlight-row="supplierInfo.row.highlightRow"
      @callback="callBackSupplier"
    />
    <SelectProductClassification
      v-if="productClassificationInfo.visible"
      v-model:show-dialog="productClassificationInfo.visible"
      :api="productClassificationInfo.api"
      :save-empty="true"
      :checked-list="
        productClassificationInfo.row.checkBox
          ? productClassificationInfo.checked[
              productClassificationInfo.row.value
            ]
          : []
      "
      :check-box="productClassificationInfo.row.checkBox"
      :highlight-row="productClassificationInfo.row.highlightRow"
      @callback="callBackProductClass"
    />
    <NewSelectProduct
      v-if="productInfo.visible"
      v-model:show-dialog="productInfo.visible"
      :api="productInfo.row.api"
      :showEditQty="false"
      :query="productInfo.row.query ? productInfo.row.query.queryMap || {} : {}"
      :queryParams="
        productInfo.row.query ? productInfo.row.query.queryParams || {} : {}
      "
      :tableKey="productInfo.row.tableKey"
      :allowCoverFilterParams="productInfo.row.allowCoverFilterParams || false"
      :save-empty="true"
      :checked-list="
        productInfo.row.checkBox
          ? productInfo.checked[productInfo.row.value]
          : []
      "
      :check-box="productInfo.row.checkBox"
      :highlight-row="productInfo.row.highlightRow"
      @callback="callBackProduct"
    />
  </div>
</template>

<script setup name="NewPageFilter">
import { getRrgUserList } from '@/api/base.js'
import {
  getDeptPage,
  getSupplierPage,
  getCoreFiscalPeriodPage,
  getProductPage,
  productCategoryPage,
} from '@/api/core.js'
import { fiscalPeriodPage } from '@/api/asset.js'
import { Search } from '@element-plus/icons-vue'
import {
  getClassifyPage,
  useStatusPage,
  getClassificationPage,
  getCategoryPage,
} from '@/api/asset'
import pinyin from 'js-pinyin'
import { defineAsyncComponent, watch } from 'vue'
const SelectModel = defineAsyncComponent(() => import('../SelectModel/index'))
const SlipSelect = defineAsyncComponent(() => import('../SlipSelect/index'))
const SelectUsers = defineAsyncComponent(() => import('../SelectUsers/index'))
const SelectUseStatus = defineAsyncComponent(() =>
  import('@/components/SelectUseStatus/index')
)
const SelectDept = defineAsyncComponent(() =>
  import('@/components/SelectDept/index')
)
const SelectSettingClassification = defineAsyncComponent(() =>
  import('@/components/SelectSettingClassification/index')
)
const SelectSettingCategory = defineAsyncComponent(() =>
  import('@/components/SelectSettingCategory/index')
)
const SelectFiscalPeriod = defineAsyncComponent(() =>
  import('@/components/SelectFiscalPeriod/index')
)
const selectPatrolRoute = defineAsyncComponent(() =>
  import('@/components/SelectPatrolRoute/index')
)
const selectMaintenance = defineAsyncComponent(() =>
  import('@/components/SelectMaintenance/index')
)
const SelectCargoSpace = defineAsyncComponent(() =>
  import('@/components/SelectCargoSpace/index')
)
const SelectMultiple = defineAsyncComponent(() =>
  import('../SelectMultiple/index')
)
const SelectSupplier = defineAsyncComponent(() =>
  import('@/components/SelectSupplier/index')
)
const SelectRepairUser = defineAsyncComponent(() =>
  import('@/components/SelectRepairUser/index')
)
const SelectMaintenanceUser = defineAsyncComponent(() =>
  import('@/components/SelectUsers/selectMaintenanceUsers')
)
const SelectAssetClassify = defineAsyncComponent(() =>
  import('@/components/SelectAssetClassify/index')
)
const SelectProductClassification = defineAsyncComponent(() =>
  import('@/components/SelectProductClassification/index')
)
// import SelectProduct from '@/components/SelectProduct/selectProduct'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  // 自定义类名
  className: {
    type: String,
    default: '',
  },
  tableRow: {
    type: Object,
    default: () => {
      return {}
    },
  }, // 相关列表
  listTypeInfo: {
    type: Object,
    default: () => {
      return {}
    },
  },
  // 过滤器列表
  filterList: {
    type: Array,
    default: () => {
      return []
    },
  },
  // 过滤器列表
  filterBtn: {
    type: Array,
    default: () => {
      return []
    },
  },
  queryMoreJson: {
    type: Boolean,
    default: false,
  },
  clearType: {
    type: Boolean,
    default: true,
  },
  slipSelectRequest: {
    //slip-select重新请求
    type: Boolean,
    default: true,
  },
  // 参数
  query: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const list = ref('')
const listTypeOptionsInfo = ref({})
const copyListTypeInfo = ref({})
// 时间相关设置
const datePickerOptions = ref({
  disabledDate(time) {
    // 大于当前的时间都不能选 (+十分钟让点击此刻的时候可以选择到当前时间)
    return time.getTime() > +new Date() + 1000 * 600 * 1
  },
})
const searchQuery = ref({})
const flag = ref('inner') // 内 inner  外outside
const searchObj = ref({})
const oldQuery = ref({})
const timeInfo = ref({})
const hideNum = ref(2)
const inputSectionMin = ref(0)
const inputSectionMax = ref(0)
const userInfo = ref({
  visible: false,
  api: getRrgUserList,
  row: {},
  data: {},
  checked: {},
})
const supplierInfo = ref({
  visible: false,
  api: getSupplierPage,
  row: {},
  data: {},
  checked: {},
})
const productInfo = ref({
  visible: false,
  api: getProductPage,
  row: {},
  data: {},
  checked: {},
})
const selectUseStatusInfo = ref({
  visible: false,
  api: useStatusPage,
  row: {},
  data: {},
  checked: {},
})
const selectDeptInfo = ref({
  visible: false,
  api: getDeptPage,
  row: {},
  data: {},
  checked: {},
})
const selectDeviceTypeInfo = ref({
  visible: false,
  api: getClassificationPage,
  row: {},
  data: {},
  checked: {},
})
const selectFinanceTypeInfo = ref({
  visible: false,
  api: getCategoryPage,
  row: {},
  data: {},
  checked: {},
})
const selectAssetClassifyTypeInfo = ref({
  visible: false,
  api: getClassifyPage,
  row: {},
  data: {},
  checked: {},
})
const selectFiscalPeriodInfo = ref({
  visible: false,
  api: getCoreFiscalPeriodPage,
  row: {},
  data: {},
  checked: {},
})
const selectPatrolRouteInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectMaintenanceInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectRepairUserInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectMaintenanceUserInfo = ref({
  title: '请选择维修人员',
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectCargoSpaceInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const productClassificationInfo = ref({
  visible: false,
  api: productCategoryPage,
  row: {},
  data: {},
  checked: {},
})
const showFilterList = ref([])
watch(
  () => searchQuery.value,
  (val) => {
    // 传入参数修改，不派发
    if (flag.value === 'outside') {
      flag.value = 'inner'
      return
    }
    if (props.queryMoreJson) {
      for (let key in searchObj.value) {
        searchObj.value[key] ? (searchObj.value[key].value = val[key]) : ''
      }
      let obj = {}
      if (Object.keys(searchObj.value).length) {
        obj = searchObj.value
      } else {
        obj = props.query
      }
      // 修改传入进来的参数
      emits('update:query', { ...obj })
    } else {
      emits('update:query', { ...props.query, ...val })
    }
  },
  {
    deep: true, // 深度监听
  }
)
watch(
  () => props.query,
  (val) => {
    flag.value = 'outside' // 标识为传入参数修改
    if (props.queryMoreJson) {
      let obj = {}
      for (let key in val) {
        obj[key] = val[key].value
      }
      searchObj.value = val
      searchQuery.value = obj
      props.filterList.forEach((item) => {
        if (
          item.componentType === 'daterange' ||
          item.componentType === 'datetimerange'
        ) {
          if (
            val &&
            val[item.value] &&
            !proxy.$fn.isEmptyString(val[item.value].value)
          ) {
            proxy.$nextTick(() => {
              let arr = proxy.$fn.splitArr(val[item.value].value)
              timeInfo.value[item.value] = Array.from(arr)
            })
          }else{
            timeInfo.value[item.value] = []
          }
        }
      })
    } else {
      searchQuery.value = val
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => props.listTypeInfo,
  (val) => {
    listTypeOptionsInfo.value = proxy.$fn.deepClone(val)
    copyListTypeInfo.value = proxy.$fn.deepClone(listTypeOptionsInfo.value)
  },
  {
    immediate: true,
    deep: true,
  }
)
watch(
  () => props.clearType,
  (val) => {
    timeInfo.value = {}
    userInfo.value.data = {}
    selectUseStatusInfo.value.data = {}
    selectDeptInfo.value.data = {}
    selectDeviceTypeInfo.value.data = {}
    selectFinanceTypeInfo.value.data = {}
    selectAssetClassifyTypeInfo.value.data = {}
    selectFiscalPeriodInfo.value.data = {}
    selectPatrolRouteInfo.value.data = {}
    selectMaintenanceInfo.value.data = {}
    selectCargoSpaceInfo.value.data = {}
    supplierInfo.value.data = {}
    productInfo.value.data = {}
    productClassificationInfo.value.data = {}
    userInfo.value.checked = {}
    selectUseStatusInfo.value.checked = {}
    selectDeptInfo.value.checked = {}
    selectDeviceTypeInfo.value.checked = {}
    selectFinanceTypeInfo.value.checked = {}
    selectAssetClassifyTypeInfo.value.checked = {}
    selectFiscalPeriodInfo.value.checked = {}
    selectPatrolRouteInfo.value.checked = {}
    selectMaintenanceInfo.value.checked = {}
    selectRepairUserInfo.value.checked = {}
    selectMaintenanceUserInfo.value.checked = {}
    selectCargoSpaceInfo.value.checked = {}
    supplierInfo.value.checked = {}
    productInfo.value.checked = {}
    productClassificationInfo.value.checked = {}
  }
)
watch(
  () => props.filterList,
  (val) => {
    echoFun()
    if (val && val.length) {
      showFilterList.value = props.filterList.filter(
        (item) =>
          !item.hasOwnProperty('show') ||
          (item.hasOwnProperty('show') && item.show)
      )
      if (hideNum.value > 2) {
        hideNum.value = showFilterList.value.length
      }
    } else {
      showFilterList.value = []
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
watch(
  () => props.slipSelectRequest,
  () => {
    echoFun()
  },
  {
    immediate: true,
    deep: true,
  }
)

function echoFun() {
  let filterList = proxy.$fn.deepClone(props.filterList)
  if (filterList.length) {
    filterList.forEach((item) => {
      let searchDefaultValue = item.searchDefaultValue
      let type = Object.prototype.toString.call(searchDefaultValue)
      if (item.componentType === 'select-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            userInfo.value.checked[item.value] = searchDefaultValue.key
          }
          userInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          userInfo.value.checked[item.value] = ''
          userInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-supplier') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            supplierInfo.value.checked[item.value] = searchDefaultValue.key
          }
          supplierInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          supplierInfo.value.checked[item.value] = ''
          supplierInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-product') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            productInfo.value.checked[item.value] = searchDefaultValue.key
          }
          productInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          productInfo.value.checked[item.value] = ''
          productInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-use-status') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectUseStatusInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectUseStatusInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          selectUseStatusInfo.value.checked[item.value] = ''
          selectUseStatusInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-dept') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectDeptInfo.value.checked[item.value] = searchDefaultValue.key
          }
          selectDeptInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          selectDeptInfo.value.checked[item.value] = ''
          selectDeptInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-device-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectDeviceTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectDeviceTypeInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          selectDeviceTypeInfo.value.data[item.value] = ''
          selectDeviceTypeInfo.value.checked[item.value] = ''
        }
      } else if (item.componentType === 'select-finance-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectFinanceTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectFinanceTypeInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectFinanceTypeInfo.value.checked[item.value] = ''
          selectFinanceTypeInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-asset-classify-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectAssetClassifyTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectAssetClassifyTypeInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectAssetClassifyTypeInfo.value.checked[item.value] = ''
          selectAssetClassifyTypeInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-fiscal-period') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectFiscalPeriodInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectFiscalPeriodInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectFiscalPeriodInfo.value.checked[item.value] = ''
          selectFiscalPeriodInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-patrol-route') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectPatrolRouteInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectPatrolRouteInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectPatrolRouteInfo.value.checked[item.value] = ''
          selectPatrolRouteInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-maintenance') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectMaintenanceInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectMaintenanceInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectMaintenanceInfo.value.checked[item.value] = ''
          selectMaintenanceInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-repair-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectRepairUserInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectRepairUserInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          selectRepairUserInfo.value.checked[item.value] = ''
          selectRepairUserInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-maintenance-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectMaintenanceUserInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectMaintenanceUserInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          selectMaintenanceUserInfo.value.checked[item.value] = ''
          selectMaintenanceUserInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-shelf-no') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectCargoSpaceInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectCargoSpaceInfo.value.data[item.value] = searchDefaultValue.value
        }else{
          selectCargoSpaceInfo.value.checked[item.value] = ''
          selectCargoSpaceInfo.value.data[item.value] = ''
        }
      } else if (item.componentType === 'select-product-class') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            productClassificationInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          productClassificationInfo.value.data[item.value] =
            searchDefaultValue.value
        }else{
          productClassificationInfo.value.checked[item.value] = ''
          productClassificationInfo.value.data[item.value] = ''
        }
      }
    })
  }
}
function clearFiscalPeriod() {
  //清除
  let data = selectFiscalPeriodInfo.value.row
  searchQuery.value[data.asValue] = ''
  selectFiscalPeriodInfo.value.data[data.value] = ''
  selectFiscalPeriodInfo.value.checked[data.value] = []
}

function visibleChange(val, _list) {
  //下拉框出现/隐藏时触发
  list.value = _list
  if (!val) {
    listTypeOptionsInfo.value[_list] = copyListTypeInfo.value[_list]
  }
}
function filterMethod(value) {
  // 自定义搜索方法
  if (value && list.value) {
    let result = []
    copyListTypeInfo.value[list.value].forEach((item) => {
      pinyin.setOptions({ checkPolyphone: false, charCase: 1 })
      const resultEng = pinyin.getCamelChars(item.key).toUpperCase()
      const matchResult =
        item.key.indexOf(value) !== -1 ||
        resultEng.indexOf(value.toUpperCase()) !== -1
      // let matchResult = PinYinMatch.match(item.key, value)
      if (matchResult) {
        result.push(item)
      }
    })
    listTypeOptionsInfo.value[list.value] = result
  } else {
    listTypeOptionsInfo.value[list.value] = copyListTypeInfo.value[list.value]
  }
}
function initParams() {
  const obj = {}
  for (const key in props.query) {
    if (props.query[key]) {
      obj[key] = proxy.$fn.deepClone(props.query[key])
    }
  }
  // searchQuery.value = obj
}
function moreFilterList() {
  let list = props.filterList.filter(
    (item) =>
      !item.hasOwnProperty('show') || (item.hasOwnProperty('show') && item.show)
  )
  if (hideNum.value !== 2) {
    hideNum.value = 2
  } else {
    hideNum.value = list.length
  }
  proxy.$store.dispatch('app/toggleOpenFilter')
}
// 获取列表
function getConfigList(str) {
  // if (str === 'search' && props.filterList) {
  //   return props.filterList.filter(
  //     (item) =>
  //       !item.hasOwnProperty('show') ||
  //       (item.hasOwnProperty('show') && item.show)
  //   )
  // } else
  if (str === 'btn' && props.filterBtn) {
    return props.filterBtn.filter(
      (item) =>
        !item.hasOwnProperty('show') ||
        (item.hasOwnProperty('show') && item.show)
    )
  }
}
// 得到placeholder的显示
function getPlaceholder(row) {
  let placeholder
  if (row.componentType === 'input' || row.componentType === 'textarea') {
    placeholder = '请输入' + row.label
  } else if (
    row.componentType === 'select' ||
    row.componentType === 'time' ||
    row.componentType === 'date' ||
    row.componentType === 'dateTime' ||
    row.componentType === 'select-model' ||
    row.componentType === 'slip-select' ||
    row.componentType === 'treeSelect'
  ) {
    placeholder = '请选择' + row.label
  } else {
    placeholder = row.label
  }
  return placeholder
}
function timeChange(val, str) {
  if (val && val.length) {
    searchQuery.value[str] = val[0] + ',' + val[1]
  } else {
    searchQuery.value[str] = null
  }
}
function checkUser(item) {
  userInfo.value.visible = true
  userInfo.value.row = item
}
function checkSupplier(item) {
  supplierInfo.value.visible = true
  supplierInfo.value.row = item
}
function checkProduct(item) {
  productInfo.value.visible = true
  productInfo.value.row = item
}

function checkUserStatus(item) {
  selectUseStatusInfo.value.visible = true
  selectUseStatusInfo.value.row = item
}
function checkDept(item) {
  selectDeptInfo.value.visible = true
  selectDeptInfo.value.row = item
}
function checkDevice(item) {
  selectDeviceTypeInfo.value.visible = true
  selectDeviceTypeInfo.value.row = item
}
function checkFinance(item) {
  selectFinanceTypeInfo.value.visible = true
  selectFinanceTypeInfo.value.row = item
}
function checkClassify(item) {
  selectAssetClassifyTypeInfo.value.visible = true
  selectAssetClassifyTypeInfo.value.row = item
}
function checkFiscalPeriod(item) {
  selectFiscalPeriodInfo.value.visible = true
  selectFiscalPeriodInfo.value.row = item
}
function checkPatrolRoute(item) {
  selectPatrolRouteInfo.value.visible = true
  selectPatrolRouteInfo.value.row = item
}
function checkMaintenance(item) {
  selectMaintenanceInfo.value.visible = true
  selectMaintenanceInfo.value.row = item
}
function checkRepairUser(item) {
  selectRepairUserInfo.value.visible = true
  selectRepairUserInfo.value.row = item
}
function checkMaintenanceUser(item) {
  selectMaintenanceUserInfo.value.visible = true
  selectMaintenanceUserInfo.value.row = item
}
function checkShelfNo(item) {
  selectCargoSpaceInfo.value.visible = true
  selectCargoSpaceInfo.value.row = item
}
function checkProductClass(item) {
  productClassificationInfo.value.visible = true
  productClassificationInfo.value.row = item
}
function callBackUser(row) {
  let data = userInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      userInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    userInfo.value.data[data.value] = row.map((item) => item.name).toString()
  } else {
    searchQuery.value[data.asValue] = ''
    userInfo.value.data[data.value] = ''
    userInfo.value.checked[data.value] = []
  }
}
function callBackSupplier(row) {
  let data = supplierInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.supplierId)
    if (type === '[object Array]') {
      supplierInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    supplierInfo.value.data[data.value] = row
      .map((item) => item.supplierName)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    supplierInfo.value.data[data.value] = ''
    supplierInfo.value.checked[data.value] = []
  }
}
function callBackProduct(row) {
  let data = productInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      productInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    productInfo.value.data[data.value] = row
      .map((item) => item.commonName)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    productInfo.value.data[data.value] = ''
    productInfo.value.checked[data.value] = []
  }
}

function callBackUserStatus(row) {
  let data = selectUseStatusInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectUseStatusInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectUseStatusInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectUseStatusInfo.value.data[data.value] = ''
    selectUseStatusInfo.value.checked[data.value] = []
  }
}
function callBackDept(row) {
  let data = selectDeptInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectDeptInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectDeptInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectDeptInfo.value.data[data.value] = ''
    selectDeptInfo.value.checked[data.value] = []
  }
}
function callBackselectDeviceType(row) {
  let data = selectDeviceTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectDeviceTypeInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectDeviceTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectDeviceTypeInfo.value.data[data.value] = ''
    selectDeviceTypeInfo.value.checked[data.value] = []
  }
}
function callBackselectFinanceType(row) {
  let data = selectFinanceTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectFinanceTypeInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectFinanceTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectFinanceTypeInfo.value.data[data.value] = ''
    selectFinanceTypeInfo.value.checked[data.value] = []
  }
}
function callBackSelectClassifyType(row) {
  let data = selectAssetClassifyTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectAssetClassifyTypeInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectAssetClassifyTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectAssetClassifyTypeInfo.value.data[data.value] = ''
    selectAssetClassifyTypeInfo.value.checked[data.value] = []
  }
}
function callBackSelectFiscalPeriod(row) {
  let data = selectFiscalPeriodInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let names = row.map((item) => item.name)
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectFiscalPeriodInfo.value.checked[data.value] = names
    }
    if (data.asValue.includes('Id') || data.asValue.includes('id')) {
      searchQuery.value[data.asValue] = ids.toString()
    } else {
      searchQuery.value[data.asValue] = names.toString()
    }

    selectFiscalPeriodInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectFiscalPeriodInfo.value.data[data.value] = ''
    selectFiscalPeriodInfo.value.checked[data.value] = []
  }
  emits('selectFiscalPeriodInfo')
}
function callBackPatrolRouteInfo(row) {
  let data = selectPatrolRouteInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectPatrolRouteInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectPatrolRouteInfo.value.data[data.value] = row
      .map((item) => item.routeName)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectPatrolRouteInfo.value.data[data.value] = ''
    selectPatrolRouteInfo.value.checked[data.value] = []
  }
}
function callBackMaintenance(row) {
  let data = selectMaintenanceInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.maintenanceId)
    if (type === '[object Array]') {
      selectMaintenanceInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectMaintenanceInfo.value.data[data.value] = row
      .map((item) => item.maintenanceName)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectMaintenanceInfo.value.data[data.value] = ''
    selectMaintenanceInfo.value.checked[data.value] = []
  }
}
function selectRepairUserCallBack(row) {
  let data = selectRepairUserInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.userId)
    if (type === '[object Array]') {
      selectRepairUserInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectRepairUserInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectRepairUserInfo.value.data[data.value] = ''
    selectRepairUserInfo.value.checked[data.value] = []
  }
}
function selectMaintenanceUserCallBack(row) {
  let data = selectMaintenanceUserInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.userId)
    if (type === '[object Array]') {
      selectMaintenanceUserInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectMaintenanceUserInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectMaintenanceUserInfo.value.data[data.value] = ''
    selectMaintenanceUserInfo.value.checked[data.value] = []
  }
}
function selectCargoSpaceCallBack(row) {
  let data = selectCargoSpaceInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectCargoSpaceInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    selectCargoSpaceInfo.value.data[data.value] = row
      .map((item) => item.locationNo)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    selectCargoSpaceInfo.value.data[data.value] = ''
    selectCargoSpaceInfo.value.checked[data.value] = []
  }
}
function callBackProductClass(row) {
  let data = productClassificationInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      productClassificationInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    productClassificationInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    productClassificationInfo.value.data[data.value] = ''
    productClassificationInfo.value.checked[data.value] = []
  }
}
function setBtnDisabled(btnDisabled) {
  if (typeof btnDisabled === 'string' || typeof btnDisabled === 'boolean') {
    return btnDisabled
  } else if (btnDisabled && typeof btnDisabled === 'function') {
    return btnDisabled()
  }
}
// // 绑定的相关事件
// handleEvent(evnet) {
//     emits('handleEvent', evnet)
// },
// // 派发按钮点击事件
// handleClick(event, data) {
//     emits('handleClick', event, data)
// }

onMounted(() => {
  oldQuery.value = Object.assign(oldQuery.value, props.query)
  initParams()
})
onUnmounted(() => {
  emits('update:query', { ...oldQuery.value })
})
// 暴露属性，否则在父组件获取不到子组件内的方法
defineExpose({
  clearFiscalPeriod,
})
</script>

<style lang="scss" scoped>
// 自定义过滤相关
.page-filter {
  // padding-bottom: 10px;
  // min-height: 35px;
  background-color: #fff;
  .filter-item {
    // display: inline-flex;
    align-items: center;
    margin-bottom: 7px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    &:last-of-type {
      margin-right: 0;
    }
  }
  .filter-label {
    padding-right: 5px;
    font-size: 14px;
    color: #606266;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter-input,
  .filter-textarea,
  .filter-search,
  .filter-time,
  .filter-date,
  .filter-dateTime,
  .filter-select,
  .filter-selectMultiple,
  .filter-slip-select,
  .filter-select-model {
    width: 220px !important;
  }
  .filter-search {
    .el-button--mini:not(.is-disabled),
    .el-button.el-button--mini:focus {
      background-color: transparent;
      border-color: transparent;
    }
  }
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
